<template>
  <div>
    <mt-header fixed title="视频科普">
      <mt-button icon="back" @click="$router.back()" slot="left"></mt-button>
    </mt-header>
    <div style="height:6vh;"></div>
    <div class="videos" v-for="{img,title,vdid} of lists" :key="vdid" @click="$router.push(`call/${vdid}`)">
        <div>
            <img :src='img' alt="">
        </div>
        <div>
            <p>{{title}}</p>
            <div>
                <span></span>
                <span><img src="@/assets/images/home/xeye.png"/>0阅读</span>
            </div>
        </div>
    </div>
    <div infinite-scroll-distance="20" v-infinite-scroll="loadMore" v-if="!lists.length==0">
        <div class="information"  v-if="infor">{{loadText}}</div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            lists:[],page:1,infor:false,loadText:'正在加载...',
        }
    },
    methods: {
        getData(callback) {
            this.axios.get(`/video?page=${this.page}`).then(res=>{
                callback(res.data.data)
            })
        },
        loadMore() {
            this.page++
            this.infor = true
            this.getData((data)=>{
                if(!data){
                    this.loadText = '没有更多数据'
                    this.getData = ()=>{}
                    return
                }
                this.lists.push(...data)
            })
        },
    },
    mounted(){
        this.getData((data)=>{this.lists=data})
    },
};
</script>

<style lang="scss" scoped>
.information{
    text-align: center;
    margin: 1vw 0;
    color: rgb(75, 75, 75);
}
::v-deep .mint-header,
::v-deep .mint-header-title,
::v-deep .mintui {
  background-color: #fff;
  color: #000;
  font-size: 1.5rem;
  font-family: '楷体';
  font-weight: 600;
}
.videos{
    margin-top: 4vh;
    width: 92vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
    padding: 0 4vw;
    >div:nth-child(1){
        border-radius: 1rem;
        width: 100%;
        flex: 3;
        overflow: hidden;
        img{
            display: block;
            width: 100%;
            height: 100%;
            transform: scale(1.5);
        }
    }
    >div:nth-child(2){
        width: 100%;
        flex: 1;
        >p{
            font-size: 1.2rem;
            letter-spacing: 0.6vw;
            font-weight: 600;
            margin: 2vw 0;
        }
        >div{
            display: flex;
            justify-content: space-between;
            >span:nth-child(1){
                color: #55CCBE;
            }
            >span:nth-child(2){
                position: relative;
                color:#707070;
                >img{
                    display: inline-block;
                    width: 15px;
                    position: absolute;
                    left: -5vw;
                    top:0.5vw;
                }
            }
        }
    }
}
</style>
